<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="./font_kcrxw23h6ie/iconfont.css">
    <link rel="stylesheet" href="./font_oly21ackr6/iconfont.css">
</head>

<body>

    <div id="user">
        <ul>
            <li> <span class="iconfont icon-200yonghu_yonghu"></span> 账号</li>

            <li> <span class="iconfont icon-gouwudai_o"></span> <b>购物袋</b>
                <p>0</p>
            </li>
            <li> <span class="iconfont icon-wodeyouhuiquan"></span> </li>
            <li> <span class="iconfont icon-aixin"></span> </li>
            <li> <span class="iconfont icon-star"></span></li>
            <li> <span class="iconfont icon-lishijilu"></span></li>
            <li id="topT"> <span class="iconfont1 icon-shangyi"></span></li>
        </ul>
    </div>
    <nav>
        <div>
            <p>郑州市</p>
            <ul>
                <li id="users" style="display: non;"></li>
                
                <li id="login" ><a href="./login.html"> 登录</a></li>
                <span>/</span>
                <li id="esc">退出</li>
                <li id="reg"><a href="./register.html"> 注册</a></li>
                <span>/</span>
                <li>签到有礼</li>
                <span>/</span>
                <li>我的订单</li>
                <span>/</span>
                <li>我的特卖</li>
                <span>/</span>
                <li>会员俱乐部</li>
                <span>/</span>
                <li>客户服务</li>
                <span>/</span>
                <li>手机版</li>
                <span>/</span>
                <li>更多</li>
            </ul>
        </div>
    </nav>
    <div id="box">

        <div id="top-logo">
            <a href=""><img src="./img/logo.png" alt="" id="logo"></a>
            <span>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </span>
            <div id="input">
                <input type="text" name="" id="">
                <button>搜索</button>

            </div>

            <div id="cart">
                <p> 购物车</p>
                <span class="iconfont icon-gouwudai_o"></span>
                <div id="arrs">0</div>
            </div>

        </div>

<a href="goods.html">
        <div id="lis">
            <ul id="btn">
                <li style="font-size: 16px;">商品分类</li>
                <li>女装/男装/内衣</li>
                <li>女鞋/男鞋/箱包</li>
                <li>护肤彩妆/个户</li>
                <li>运动户外</li>
                <li>家电数码</li>
                <li>母婴童装</li>
                <li>母婴童装</li>
                <li>母婴童装</li>
            </ul>
           
        </div>
    </a>
        <div id="item" style="display: none;">
            <ul class="items">
                <li  class="item block">针织衫 T恤 连衣裙 衬衫 休闲裤 外套 牛仔裤 半截裙 套装 妈妈装
                    流行裙装
                    高腰美裙 中长款裙 碎花美裙 纯色美裙 格纹美裙 百褶美裙 牛仔美裙 真丝美裙 吊带美裙 旗袍美裙 大码裙装 半截裙</li>
                <li  class="item">针织衫 T恤 连衣裙 衬衫 休闲裤 外套 牛仔裤 半截裙 套装 妈妈装
                    流行裙装
                    高腰美裙 中长款裙 碎花美裙 纯色美裙 格纹美裙 百褶美裙 牛仔美裙 真丝美裙 吊带美裙 旗袍美裙 大码裙装 半截裙</li>
                <li  class="item">短筒靴 粗跟靴 平底靴 马丁靴 切尔西/烟筒靴 高跟靴 休闲靴 高筒靴 雪地靴
                    女单鞋
                    浅口单鞋 粗跟鞋 低跟鞋 乐福鞋 尖头鞋 深口单鞋 女高跟鞋 平底鞋 玛丽珍鞋
                    女休闲鞋
                    小白鞋 板鞋 老爹鞋 网面鞋 帆布鞋 高帮鞋 内增高 椰子鞋 乐福鞋
                    男休闲鞋
                    一脚蹬 休闲皮鞋 豆豆鞋 椰子鞋 网面鞋 高帮鞋 小白鞋 老爹鞋 帆布鞋
                    男靴
                    男马丁靴 男雪地靴 男商务靴 男切尔西靴 男工装靴 雪地靴
                    男商务鞋
                    正装鞋 英伦鞋 系带商务鞋 套脚商务鞋 布洛克鞋 冲孔鞋 德比鞋 休闲皮鞋</li>
                <li  class="item">
                    女休闲鞋
                    小白鞋 板鞋 老爹鞋 网面鞋 帆布鞋 高帮鞋 内增高 椰子鞋 乐福鞋
                    男休闲鞋
                    一脚蹬 休闲皮鞋 豆豆鞋 椰子鞋 网面鞋 高帮鞋 小白鞋 老爹鞋 帆布鞋
                    男靴
                    男马丁靴 男雪地靴 男商务靴 男切尔西靴 男工装靴 雪地靴
                    男商务鞋
                    正装鞋 英伦鞋 系带商务鞋 套脚商务鞋 布洛克鞋 冲孔鞋 德比鞋 休闲皮鞋</li>
                <li  class="item">短筒靴 粗跟靴 平底靴 马丁靴 切尔西/烟筒靴 高跟靴 休闲靴 高筒靴 雪地靴
                    女单鞋
                    浅口单鞋 粗跟鞋 低跟鞋 乐福鞋 尖头鞋 深口单鞋 女高跟鞋 平底鞋 玛丽珍鞋
                    女休闲鞋
                    小白鞋 板鞋 老爹鞋 网面鞋 帆布鞋 高帮鞋 内增高 椰子鞋 乐福鞋
                    男休闲鞋
                    一脚蹬 休闲皮鞋 豆豆鞋 椰子鞋 网面鞋 高帮鞋 小白鞋 老爹鞋 帆布鞋
                    男靴</li>
            </ul>
        </div>
        <div id="top-nav">

            <ul>

                <li id="todo">商品分类</li>
                
                <li>推荐</li>
                <li>3折疯抢</li>
                <li>唯品快抢</li>
                <li>唯品奥莱</li>
                <li>女装</li>
                <li>鞋包</li>
                <li>运动</li>
                <li>母婴</li>
                <li>美妆</li>
                <li>男装</li>
                <li>电器</li>
                <li>内衣</li>
                <li>更多</li>

            </ul>

        </div>





        <div id="bg">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./img/lunbo1.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/lunbo2.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/lunbo3.jpg" />
                    </div>
                    <div id="" style="z-index: 99;">
                        <p>123</p>
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-scrollbar"></div>
                <div class="swiper-pagination"></div>
            </div>

        </div>
        <div id="day">
            <a href="goods.html">
                <img src="./img/day.jpg" alt="">
            </a>
        </div>
        <a href="goods.html">
            <div id="content">

                <div></div>
                <div></div>
                <div></div>

            </div>
        </a>
        <div id="day1">
            <img src="./img/day1.jpg" alt="">

        </div>

        <div id="day-content">
            <a href="goods.html">
                <div>
                    <ul>

                        <li>
                            <p id="con1"><img src="./img/qipilang.jpg" alt=""></p>
                            <p id="logos"><img src="./img/qipilanglogo.png" alt=""></p>
                            <span>共2款</span>
                            <p id="price"><b>特卖价</b> ￥12</p>
                        </li>
                        <li>
                            <p id="con1"><img src="./img/jinlilai.jpg" alt=""></p>
                            <p id="logos"><img src="./img/jinlilailogo.png" alt=""></p>
                            <span>共15款</span>
                            <p id="price"><b>特卖价</b> ￥12</p>
                        </li>
                        <li>
                            <p id="con1"><img src="./img/si.jpg" alt=""></p>
                            <p id="logos"><img src="./img/silogo.png" alt=""></p>
                            <span>共1款</span>
                            <p id="price"><b>特卖价</b> ￥12</p>
                        </li>
                    </ul>
                </div>
            </a>
            <div>
                <!-- <p><img src="./img/top2.jpg" alt=""></p> -->
                <a href="goods.html">
                    <ul>
                        <li>
                            <p id="con1"><img src="./img/mist.jpg" alt=""></p>
                            <p id="logos"><img src="./img/mistlogo.png" alt=""></p>
                            <span>共2款</span>
                            <p id="price"><b>特卖价</b> ￥12</p>
                        </li>
                        <li>
                            <p id="con1"><img src="./img/haoqi.jpg" alt=""></p>
                            <p id="logos"><img src="./img/haoqilogo.png" alt=""></p>
                            <span>共15款</span>
                            <p id="price"><b>特卖价</b> ￥12</p>
                        </li>
                        <li>
                            <p id="con1"><img src="./img/sitamei.jpg" alt=""></p>
                            <p id="logos"><img src="./img/sitameilogo.jpg" alt=""></p>
                            <span>共1款</span>
                            <p id="price"><b>特卖价</b> ￥12</p>
                        </li>
                    </ul>
                </a>
            </div>
            <div>
                <a href="goods.html">
                    <!-- <p><img src="./img/top3.jpg" alt=""></p> -->
                    <ul class="list">
                        <li>
                            <p id="con1"><img src="./img/qianbihuangyou.jpg" alt=""></p>
                            <!-- <p id="logos"><img src="./img/qipilanglogo.png" alt=""></p> -->
                            <span>共2款</span>
                            <p id="price"><b>特卖价</b> ￥12</p>
                        </li>
                        <li>
                            <p id="con1"><img src="./img/qianbihuangyou2.jpg" alt=""></p>
                            <!-- <p id="logos"><img src="./img/jinlilailogo.png" alt=""></p> -->
                            <span>共15款</span>
                            <p id="price"><b>特卖价</b> ￥12</p>
                        </li>
                        <li>
                            <p id="con1"><img src="./img/qianbihuangyou3.jpg" alt=""></p>
                            <!-- <p id="logos"><img src="./img/silogo.png" alt=""></p> -->
                            <span>共1款</span>
                            <p id="price"><b>特卖价</b> ￥12</p>
                        </li>
                    </ul>
                </a>
            </div>
            <div>
                <!-- <p><img src="./img/top3.jpg" alt=""></p> -->
                <a href="goods.html">
                    <ul class="list">
                        <li>
                            <p id="con1"><img src="./img/yundongxie.jpg" alt=""></p>
                            <!-- <p id="logos"><img src="./img/qipilanglogo.png" alt=""></p> -->
                            <span>&nbsp;</span>
                            <p id="price">运动鞋</p>
                        </li>
                        <li>
                            <p id="con1"><img src="./img/lianyiqun.jpg" alt=""></p>
                            <!-- <p id="logos"><img src="./img/jinlilailogo.png" alt=""></p> -->
                            <span>&nbsp;</span>
                            <p id="price">连衣裙</p>
                        </li>
                        <li>
                            <p id="con1"><img src="./img/tongxie.jpg" alt=""></p>
                            <!-- <p id="logos"><img src="./img/silogo.png" alt=""></p> -->
                            <span>&nbsp;</span>
                            <p id="price">童鞋</p>
                        </li>
                    </ul>
                </a>
            </div>

        </div>
    </div>



    <script src="./swiper/swiper-bundle.min.js"></script>

    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 1,
            autoplay: true,
            // loop : true,
            effect: 'fade',
            centeredSlides: false,
            slidesPerGroupSkip: 1,
            grabCursor: true,
            keyboard: {
                enabled: true,
            },
            breakpoints: {
                769: {
                    slidesPerView: 1,
                    slidesPerGroup: 1,
                },
            },
            scrollbar: {
                el: ".swiper-scrollbar",
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
        });

        let todo = document.querySelector("#todo")
        let lis = document.querySelector("#lis")
        let oli = document.querySelectorAll("#lis ul li")
        var item = document.querySelectorAll(".item")
        let items = document.querySelector('#item')
        todo.onmouseover = function () {
            lis.style.display = "block"
            items.style.display = "block"

            oli.forEach(function(btns,i){
                btns.onmouseover = function(){
                    oli.forEach(function(v){


                        v.style.backgroundColor = ''
                        v.style.color = 'white'
                        oli[0].style.backgroundColor = '#F10180'
                        
                     
                        
                    })
                    btns.style.backgroundColor = 'white'
                    btns.style.color = '#F10180'
                    
                    oli[0].style.color = 'white'
                    oli[0].style.backgroundColor = '#F10180'
                    // var item = document.querySelectorAll(".item")
                    item.forEach(function(v){
                        v.classList.remove("block")
                    })

                    item[i].classList.add("block")


                }


            })







            lis.onmouseleave = function(){
                lis.style.display = "none"
                // console.log(oli);

                let items = document.querySelector('#item')
                items.style.display = 'none'


            }
        
        }
        


        let username = localStorage.getItem("username")
        console.log(username);

        let topT = document.querySelector("#topT")
    topT.onclick = function(e){
    console.log(e.screenX);
        document.documentElement.scrollTo({top:0,behavior:"smooth"})

}
        



let users = document.querySelector("#users")
console.log(users);
users.innerHTML = username 
let login = document.querySelector("#login")
let reg = document.querySelector("#reg")
let esc = document.querySelector("#esc")
login.style.display="none"
reg.style.display= "none"
if(username == null){
    login.style.display="block"
    reg.style.display= "block"
    esc.style.display = "none"
    console.log(11111);
}
esc.onclick = function(){
    localStorage.clear()
    location.reload()
    console.log(username);
}
console.log(username);
    </script>

</body>

</html>